<template>
  <card class="insure-card" :headerStyle="{ paddingTop: '4px' }" title="借调记录" :showDivider="false">
    <table-index :table="table" @loadData="loadData">
      <template #carInfo="{ record }">
        <div>{{ record.licenseNo }}</div>
        <div>{{ record.modelName }}</div>
      </template>
    </table-index>
  </card>
</template>
<script setup lang="ts">
  import { reactive, onMounted } from 'vue'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { getCarTransferList } from '@/api/asset/carTransfer'

  import { useRoute } from 'vue-router'
  const queryParam = reactive({})
  const route = useRoute()
  const table = useTable({
    columns: [
      { title: '调车单号', dataIndex: 'code', fixed: 'left', width: 160 },
      { title: '车辆信息', slotName: 'carInfo', width: 240 },
      { title: '归属门店', dataIndex: 'siteName', width: 150 },
      { title: '借调类型', dataIndex: 'typeName', width: 100 },
      { title: '借调开始时间', dataIndex: 'startTime', width: 170 },
      { title: '借调结束时间', dataIndex: 'endTime', width: 170 },
      { title: '租期', dataIndex: 'rentDays', width: 120 },
      { title: '借调公司', dataIndex: 'sourceName', width: 150 },
      { title: '费用金额', dataIndex: 'amount', unit: '元', width: 120 },
      { title: '借调状态', dataIndex: 'statusName', width: 100 },
      { title: '创建人', dataIndex: 'createUserName', width: 100 },
      { title: '操作时间', dataIndex: 'createTime', width: 170 },
    ],
  })

  const loadData = useFetchTableDataApi(table, queryParam, getCarTransferList)

  onMounted(() => {
    // loadData()
    if (route.params) {
      console.log(route.params)
      queryParam.carId = route.params.id
      loadData()
    }
  })
</script>
<style scoped lang="less"></style>
